<template>
  <a-spin :spinning="loading">
    <div class="bg-white p-20">
      <a-form v-show="!isSuccess" :form="createEditForm" @submit="handleSubmit">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="被举报人姓名">
              <a-input
                :maxLength = '16'
                placeholder="请输入被举报人姓名"
                v-decorator="[
                  'name',
                  {rules: [{required: true, message: '请输入被举报人姓名', whitespace: true},],initialValue: detailInfo.name}
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="联系方式">
              <a-input
                placeholder="请输入联系方式"
                :maxLength="20"
                v-decorator="[
                  'phone',
                  {rules: [{required: true, validator:phoneValidator}],initialValue: detailInfo.phone}
                ]"
              />
            </a-form-item>
          </a-col>
          
          <a-col :span="8">
            <a-form-item label="证件类型">
              
              <a-select
                v-decorator="[
                'credentialType',
                { rules: [{ required: true, message: '请选择证件类型' }], initialValue: detailInfo.credentialType },
              ]"
                placeholder="请选择证件类型"
              >
                <a-select-option v-for="(item, index) in credentialsList" :key="item.value" :value="item.value">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="证件号码">
              <a-input
                :maxLength = '60'
                placeholder="请输入证件号码"
                v-decorator="[
                  'credentialNo',
                  {rules: [{required: true, message: '请输入证件号码', whitespace: true},],initialValue: detailInfo.credentialNo}
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-form-item label="举报类型(多选)">
          <a-checkbox-group
            @change="reportTypesChange"
            v-decorator="[
                'reportTypes',
                { rules: [{ required: true, message: '请选择举报类型' }],initialValue: detailInfo.reportTypes },
            ]"
          >
            <div class="flex flex-wrap">
              <a-checkbox :value="item.value" v-for="(item, index) in reportReasonList" :key="item.value">{{item.name}}
              </a-checkbox>
            </div>
          </a-checkbox-group>
        
        </a-form-item>
        
        
        <a-form-item  v-if="isShowReportOtherType">
          <a-input
            :maxLength = "500"
            v-decorator="[
              'reportOtherType',
              {rules: [{required: true, message: '请输入其他举报类型', whitespace: true}],initialValue: detailInfo.reportOtherType},
            ]"
            :rows="4"
            type="textarea"
            placeholder="请输入其他举报类型"
          />
        </a-form-item>
        
        <a-form-item label="举报原因">
          <a-input
            :maxLength = "500"
            v-decorator="[
              'reportReason',
              {rules: [{required: true, message: '请输入举报原因', whitespace: true}],initialValue: detailInfo.reportReason},
            ]"
            :rows="4"
            type="textarea"
            placeholder="请输入举报原因"
          />
        </a-form-item>
        
        
        <a-form-item
          :label="'失信凭证('+ reportPicsLen + '/10)'"
          :required = "true"
        >
          <div class="flex flex-wrap" >
            <div class="mr-10 mb-10 relative ss-up-btn br10" v-for="(item, index) in createEditForm.getFieldValue('reportPics')" :key="index">
              <div class="w-20 h-20 flex justify-center items-center bg-red-501 br1000 text-white right-0 top-0 absolute cursor-pointer" @click="delReportPics(index)">
                <span class="-mt-3">x</span>
              </div>
              <img class="w-120 h-120 object-cover br10" :src="item.filePath" />
            </div>
            
            <Upload :scene="2" @uploadSuccess="uploadSuccess($event)" v-if="reportPicsLen<10">
              <div class="w-120 h-120 flex items-center justify-center ss-up-btn br10 overflow-hidden cursor-pointer">
                <div class="text-center">
                  <a-icon :type="loading ? 'loading' : 'plus'"/>
                  <div class="ant-upload-text">
                    上传
                  </div>
                </div>
              </div>
            </Upload>
          </div>
          <a-input type="hidden" v-decorator="['id', {initialValue: detailInfo.id}]"/>
          <a-input type="hidden" v-decorator="['reportPics', {initialValue: detailInfo.reportPics}]"/>
        </a-form-item>
        <section class="flex justify-center">
          <a-button type="primary" style="width: 200px; height: 40px" html-type="submit">提交审核</a-button>
        </section>
      </a-form>
      <section v-show="isSuccess" style="width: 66%; padding-bottom: 60px;" class="m-auto">
        <a-result
          status="success"
          style="padding-bottom: 0;"
          title="举报申请提交成功"
          sub-title="本次失信举报成功，平台会在72小时内审核该举报内容并予以处理。具体处理进度请留意“举报记录-本行举报记录”中的举报信息状态变化，举报在平台处理并核实后，会及时更新失信人的风险等级。">
          <template #extra>
            <section class="px-24">
              <section class="mb-16 font-bold text-16 text-left">举报内容</section>
              <section class="flex justify-between">
                <section>举报单号：{{ resultData.oddNumber }}</section>
                <section>举报时间：{{ resultData.createTime }}</section>
              </section>
            </section>
          </template>
        </a-result>
        <a-steps :current="1" class="my-16">
          <template #progressDot="{index, status, prefixCls}">
            <span :class="`${prefixCls}-icon-dot`" />
          </template>
          <a-step title="举报失信">
            <template #description>
              <section>{{ resultData.createByName }}</section>
              <section>{{ resultData.createTime }}</section>
            </template>
          </a-step>
          <a-step title="平台审核">
            <template #description>
              <section>客服处理</section>
              <section>举报提交72小时内</section>
            </template>
          </a-step>
          <a-step title="核实并更新客户风险等级"/>
          <a-step title="完成"/>
        </a-steps>
        <section class="flex mt-48 justify-center">
          <a-button class="mr-8" type="primary">
            <router-link to="/Risk">查看举报记录</router-link>
          </a-button>
          <a-button @click="isSuccess = isShowReportOtherType = false; createEditForm.resetFields()">继续举报失信</a-button>
        </section>
      </section>
    </div>
  </a-spin>
</template>

<script>
import { createCustomerReport, getCustomerReport, editCustomerReport, getCustomerReportPics } from '@/api/report'
import Upload from '@/components/Upload'
import moment from 'moment'
import { each } from 'lodash'
import { mapGetters } from 'vuex'

export default {
  name: 'ReportPersonItem',
  components: {
    Upload
  },
  data() {
    return {
      createEditForm: this.$form.createForm(this), // 表单对象
      imageUrl: '',
      isSuccess: false,
      loading: false, // 是否在加载中
      id: 0, // 编辑用的
      detailInfo: { // 详细数据
        id: 0,
        name: '', // 名称
        phone: '', // 联系方式
        credentialType: undefined, // 证件类型 数据字典
        credentialNo: '', // 证件号码
        reportTypes: [], // 举报类型 多选,分割
        reportOtherType: '', // 举报其他类型 手动填写
        reportPics: [] // 举报凭证图片
      },
      resultData: {},
      credentialsList: [], // 证件列表
      reportReasonList: [], // 举报类型
      reportPicsLen: 0, // 凭证图片
      isShowReportOtherType: false, // 是否显示其他举报类型
    }
  },
  
  created() {
    this.$utils.getDictList('CredentialType').then(res=>{ //证件类型
      let _arr = res.map((item, index)=>{
        return {
          ...item,
          value: item.value
        }
      })
      this.credentialsList = _arr
    })
    
    this.$utils.getDictList('ReportType').then(res=>{ // 举报类型
      this.reportReasonList = [...res, { value: -1, name: '其他' }]
    })
    
    this.id = this.$route.query.id || 0
    if (this.id > 0) {
      this._getCustomerReport() // 获取编辑会员举报信息
      this._getCustomerReportPics() // 查看举报凭证
    }
    
  },
  mounted() {
    const data = this.$route.params
    if (data.name) {
      this.$nextTick(() => {
        this.createEditForm.setFieldsValue({
          name: data.name,
          phone: data.phone,
          credentialType: data.credentialType,
          credentialNo: data.credentialNo
        })
      })
    }
  },
  methods: {
    moment,
    _isShowReportOtherType(){ // 是否要显示其他类型
      this.isShowReportOtherType = this.createEditForm.getFieldValue('reportTypes').includes(-1)
    },
    phoneValidator(rule, value, callback) {
      const phone = value && value.trim()
      const isMobile = /^1[3|5|8]\d{9}$/
      const isZuoji = /^0\d{2,3}-?\d{7,8}$/
      const isZuoji2 = /\d{6,8}/
      if (phone && !isMobile.test(phone) && !isZuoji.test(phone) && !isZuoji2.test(phone)) {
        callback(new Error('请输入正确的联系电话'))
      } else {
        callback()
      }
    },
    
    reportTypesChange() {
      this.$nextTick(()=>{
        this._isShowReportOtherType()
        this.detailInfo.reportOtherType = ''
        this.createEditForm.setFieldsValue({
          reportOtherType: ''
        })
      })
    },
    
    _getCustomerReport() { // 获取编辑会员举报信息
      this.loading = true
      getCustomerReport({ id: this.id }).then((res) => {
        res = {
          ...res,
          reportTypes: res.reportTypes.split(',')
        }
        this.loading = false
        res.reportTypes = res.reportTypes.map(Number)
        this.detailInfo = res
        this._getCustomerReportPics() // 获取凭证
        
      })
    },
    
    _getCustomerReportPics(){ // 查看举报凭证
      getCustomerReportPics({ reportId: this.id }).then((res) => {
        this.detailInfo = {
          ...this.detailInfo,
          reportPics: res
        }
        
        this.createEditForm.setFieldsValue({
          reportPics: res
        })
        this._reportPicsLenFn()
        this._isShowReportOtherType()
      })
    },
    
    handleSubmit(e) { // 表单提交
      e.preventDefault()
      this.createEditForm.validateFields((err, values) => {
        if (!err) {
          let v = {
            ...values,
            reportTypes: values.reportTypes.join(',')
          }
          
          if ( !this.isShowReportOtherType ) {
            v = {
              ...v,
              reportOtherType: '-'
            }
          }
          
          const confirmFn = v.id > 0 ? editCustomerReport : createCustomerReport
          this.loading = true
          confirmFn(this.$utils.trimValue(v)).then(data => {
            this.$message.success(`${v.id ? '修改' : '新增'}成功！`)
            // this.$router.push(`/Risk/ReportList`)
            this.isSuccess = true
            this.resultData = data
          }).finally(()=>{ this.loading = false})
        }
      })
    },
    
    uploadSuccess(e) { // 图片上传
      this.createEditForm.setFieldsValue({
        reportPics: [
          ...this.createEditForm.getFieldValue('reportPics') || [],
          {
            id: 0,
            reportId: 0,
            filePath: e.path,
            thumbnailPath:  e.thumbnailPath
          }
        ]
      })
      this._reportPicsLenFn()
    },
    
    delReportPics(i){ // 删除举报凭证
      let arr = this.createEditForm.getFieldValue('reportPics')
      arr.splice(i, 1)
      this.createEditForm.setFieldsValue({
        reportPics: arr
      })
      this._reportPicsLenFn()
    },
    
    _reportPicsLenFn (){ // 失信凭证图片数量
      this.reportPicsLen = this.createEditForm.getFieldValue('reportPics').length
    }
  }
}
</script>

<style scoped>
  .ss-up-btn {
    border: 1px dashed #d9d9d9;
    background: #fafafa
  }
</style>
